<template>
	<view>
		<!-- 切换视频和图片 -->
		<view class="toggle_vi">
			<!-- 视频 -->
			<view class="togbox" v-if="tovimg=='1'">
				<video style="width:100%;height: 100%;" src="https://vd3.bdstatic.com/mda-mf825kxd6uq0eqk4/fhd/cae_h264_nowatermark/1623202510458902408/mda-mf825kxd6uq0eqk4.mp4?v_from_s=sz_haokan_4469&auth_key=1623665980-0-0-278098895d18d1e8b51c00c634becaf5&bcevod_channel=searchbox_feed&pd=1&pt=3&abtest=" controls></video>
			</view>
			<!-- 图片 -->
			<view class="togbox" v-else>
				<u-swiper style="width: 100%;height: 100%;" :list="list"></u-swiper>
			</view>
			<view class="btns">
				<button type="default" @click="changetovimg('1')">视频</button>
				<button type="default" @click="changetovimg('2')">图片</button>
			</view>
		</view>
		<view>
			<image src="../../../static/uview/common/mu.png" style="width: 100%;" mode="widthFix"></image>
		</view>
		<view style='overflow: hidden;padding: 15upx;'>
			<view style="float: left;width: 146upx;">
				<image src="../../../static/uview/common/不负时光.png" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view style="float: left;width: 565upx;">
				<span class="fal">
					推荐
				</span>
				<span class="sp-name" >
					<span class="name-left"> 福泽园人文纪念园文化赋能！...</span>
					<span class="name-right"> ＞ </span>
				</span>
			</view>
		</view>

		<!-- 墓园介绍 -->
		<view class="decoretion itembox">
			<view class="item_title ml-4">
				墓园简介
			</view>
			<view class="addressbtns">
				<view class="addressbtn active-addresbtn">
					昌荣镇
				</view>
				<view class="addressbtn">
					金鸡镇
				</view>
				<view class="addressbtn">
					紫金镇
				</view>
				<view class="addressbtn">
					庆祝真
				</view>
				<view class="addressbtn">
					红棉镇
				</view>
			</view>
			<view class="infoitems">
				<span class="itemname">项目名称</span>
				<span class="itemcount">福泽园人文纪念园</span>
			</view>
			<view class="infoitems">
				<span class="itemname">建立时间</span>
				<span class="itemcount">2020年10月</span>
			</view>
			<view class="infoitems">
				<span class="itemname">项目地址</span>
				<span class="itemcount">广东省潮州市饶平县光明农场区域</span>
			</view>
			<view class="count">
				福泽园致力于殡葬行业的产业升级与文化赋能，主动探索，积极创新，将岭南文化与潮汕文化融入殡葬文化之中，结合古代堪舆文化、宗教文化，勾勒品牌文化精髓，坚守“以家为根、以孝为本，以爱为魂”的文化信仰，立足潮汕，为全省、全国、全世界的有福者打造“逝有所安
				故有所尊”的心灵家园。
			</view>
		</view>
		<view class="itembox">
			<view class="phone">
				<view class="phonecode">
					400 526 3356
				</view>
				<view class="tit">
					安全通话隐藏真实号码，致电接待中心了解更多信息
				</view>
			</view>
		</view>
		<view class="itembox padding-36">
			<view class="item_title ml-12">
				定制福位
			</view>
			<view style="width: 100%;overflow-x: auto;">
				<view class="imgit" :class="['w'+list1.length]" :style="{overflow: 'hidden'}">
					<image :src="item" mode="widthFix" v-for="(item,index) in list1" :key="index"
						style="width: 180upx;margin:0 18upx;float: left;"></image>
				</view>
			</view>
		</view>
		<!-- 服务内容 -->
		<view class="itembox padding-36">
			<view class="item_title ml-12">
				服务内容
			</view>
			<view class="item_nav">
				<span class="act">
					葬式服务
				</span>
				<span>
					定制服务
				</span>
				<span>
					智慧运营
				</span>
			</view>
			<view class="lists">
				<view class="list">
					<image src="../../../static/uview/common/中式葬礼.png" mode="widthFix"></image><br>
					<span class="text">
						中式葬礼
					</span><br>
					<span class="tit">
						中华传统文化
					</span>
				</view>
				<view class="list">
					<image src="../../../static/uview/common/西式葬礼.png" mode="widthFix"></image><br>
					<span class="text">
						西式葬礼
					</span><br>
					<span class="tit">
						信仰之墓
					</span>
				</view>
				<view class="list">
					<image src="../../../static/uview/common/个性葬礼.png" mode="widthFix"></image><br>
					<span class="text">
						个性葬礼
					</span><br>
					<span class="tit">
						站在时尚巅峰
					</span>
				</view>

				<view class="list">
					<image src="../../../static/uview/common/宗教法师.png" mode="widthFix"></image><br>
					<span class="text">
						宗教法师
					</span><br>
					<span class="tit">
						社会文化
					</span>
				</view>
			</view>

		</view>
		<view class="itembox padding-36" style="text-align: center;">
			<image src="../../../static/uview/common/私人订制.png" mode="widthFix" style="width: 706upx; max-width: 100%;" @click="jumpBooking" ></image>
		</view>
		<!-- 人文故事 -->
		<view class="itembox padding-36">
			<view class="item_title ml-12">
				人文故事
			</view>
			<view style="overflow: hidden;">
				<view style="float: left;">
					<image src="../../../static/uview/common/人文故事1.png" mode="widthFix" style="width: 273upx;height: 322upx;"></image>
				</view>
				<view style="float: left; margin-right: 10upx; position: relative;">
					<image src="../../../static/uview/common/接待中心.png" mode="widthFix" style="width: 192upx;height: 156upx;"></image>
					<span class="sp-info" >接待中心</span>
				</view>
				<view style="float: left; position: relative;">
					<image src="../../../static/uview/common/世界第一牌坊.png" mode="widthFix" style="width: 192upx;height: 156upx;"></image>
					<span class="sp-info">世界第一牌坊</span>
				</view>
				<view style="float: left; margin-right: 10upx; position: relative;">
					<image src="../../../static/uview/common/百姓祠堂.png" mode="widthFix" style="width: 192upx;height: 156upx;"></image>
					<span class="sp-info">百姓祠堂</span>
				</view>
				<view style="float: left; position: relative;">
					<image src="../../../static/uview/common/华慧阁.png" mode="widthFix" style="width: 192upx;height: 156upx;"></image>
					<span class="sp-info">华汇阁</span>
				</view>
			</view>
		</view>
		<!-- 园区动态 -->
		<view class="itembox padding-36">
			<view class="item_title ml-12">
				<span>园区动态</span>
				<span class="look-more" >查看更多 ></span>
			</view>
			<view class="acttitle">
				<image src="../../../static/uview/common/顶部背景图.png"></image>
				<span>潮汕宋皇轩</span>
			</view>
			<view class="actcount">
				今日，潮汕宋皇轩一期定时定点交付，欢迎大家前 来购...
			</view>
			<image src="../../../static/uview/common/世界第一牌坊.png" style="width: 661upx;height: 380upx;" mode=""></image>
			<view class="time-vi">
				2021年05月06日  23:00:00
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tovimg: true,
				list: ['https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg'
				],
				list1: ['https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg', 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg'
				]
			}
		},
		methods: {
			// 视频、图片 切换
			changetovimg(flag) {
				this.tovimg = flag
			},
			
			// 跳转 预约页面
			jumpBooking(){
				this.$u.route({
					url:'/pages/view/home/resubscribe/resubscribe'
				})
			}
		}
	}
</script>

<style lang="less">
	.acttitle{
		line-height: 84upx;
		color: #000000;
		font-size: 30upx;
		image{
			width: 82upx;
			height: 84upx;
			border-radius: 50%;
			vertical-align: top;
			margin-right: 20upx;
		}
	}
	.actcount{
		color: #000000;
		font-size: 30upx;
		margin:20upx auto;
	}
	.lists{
		overflow: hidden;
	}
	.list {
		text-align: center;
width: 25%;
float: left;
		image {
			width: 50upx;
			height: 50upx;

		}

		.text {
			font-size: 32upx;
			color: #653900;
		}

		.tit {
			font-size: 16upx;
			color: #653900;
		}
	}

	.toggle_vi {
		width: 100%;
		height: 350upx;
		position: relative;
		overflow: hidden;
	}

	.btns {
		position: absolute;
		bottom: 10upx;
		text-align: center;
	}

	.togbox {
		width: 100%;
		height: 100%;
	}

	.btns {
		width: 100%;

		button {
			display: inline-block;
			margin-left: 10upx;
			width: 58upx;
			height: 23upx;
			font-size: 16upx;
			line-height: 23upx;
			padding: 0;
		}
	}

	.item_title {
		font-size: 36upx;
		position: relative;
		margin: 35upx;
		color: #333333;
		line-height: 33upx;
		margin-right: 0;
	}

	.item_title::before {
		position: absolute;
		width: 4upx;
		height: 100%;
		content: "";
		background-color: #D6A557;
		left: -23upx;
	}

	.addressbtns {
		// text-align: center;
		margin-left: -8upx;

		.addressbtn {
			display: inline-block;
			width: 114upx;
			font-size: 24upx;
			color: #333333;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			border: 1upx solid #74777C;
			margin: 5upx;
		}
		.active-addresbtn {
			border: 1upx solid #EAC17D;
		}
	}

	.infoitems {
		margin: 26upx 0;
		font-size: 28upx;
		line-height: 33upx;

		.itemname {
			color: #74777C;
			margin-right: 15upx;
		}

		.itemcount {
			color: #333;
		}
	}

	.count {
		font-size: 24upx;
		color: #000000;
		text-indent: 50upx;
		line-height: 36upx;
	}

	.itembox {
		padding: 0 45upx;
		margin: 32upx 0;
	}
	.padding-36{
		padding: 0 36upx;
	}

	.phone {
		background-color: #EBD4AB;
		padding: 35upx 0;

		.phonecode {
			font-size: 46upx;
			color: #000000;
			text-indent: 20upx;
		}
	}

	.tit {
		color: #777;
		font-size: 24upx;
		text-indent: 20upx;
		margin-top: 20upx;
	}

	.imgit {
		white-space: nowrap;
	}

	.w1 {
		width: 216upx;
	}

	.w2 {
		width: 432upx;
	}

	.w3 {
		width: 648upx;
	}

	.w4 {
		width: 864upx;
	}

	.w5 {
		width: 1080upx;
	}

	.w6 {
		width: 1296upx;
	}
	.item_nav{
		
		margin:12upx 0 ;
	}
	.item_nav>span{
		padding: 12upx;
		font-size: 24upx;
		color: #7B7B7B;
	}
	.item_nav>span.act{
		color: #D6A557;
		font-size: 30upx;
	}
	.fal{
		// margin:0 15upx;
		margin-left:28upx;
		margin-right: 24upx;
		padding: 5upx 12upx;
		border: 1upx solid #D6A557;
		color: #D6A557;
		font-size: 26upx;
		border-radius: 8upx;
		float: left;
	}
	
	.ml-4{
		margin-left:4upx;
	}
	.ml-12{
		margin-left: 12upx;
	}
	.sp-name{
		width: 412upx;
		float: left;
		padding-top: 8upx;
		font-size: 24upx;
		overflow: hidden;
	}
	.name-left{
		width: 350rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		float: left;
	}
	.name-right{
		padding-left: 18upx;
		float: right;
	}
	.look-more{
		font-size: 24upx;
		color: #999999;
		float: right;
	}
	.sp-info{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 40upx;
		text-align: center;
		font-size: 27upx;
		color: #FFFFFF;
	}
	.time-vi{
		font-size: 18upx;
		color: #9D9D9D;
		padding-top: 16upx;
		text-align: right;
		padding-right:6upx;
	}
</style>
